<template>
	<view class="container">
		<view class="flex_start">
			<view class="flex_start type_box">
				<picker @change="bindPickerChange" :value="info.publishType" :range="TypeList" :range-key="'name'">
					<view class="picker">{{TypeList[index].name}}</view>
				</picker>
				<image src="../../static/img/yellowDown.png" mode="" class="arrow_down"></image>
			</view>
			<view class="input_uni flex_start">
				<image src="../../static/img/search.png" class="search_img"></image>
				<input class="search_input" v-model="info.keyword" confirm-type="search" @confirm="search_key()"  placeholder="想找点什么？" placeholder-style="font-size:25rpx;color:#999595" />
			</view>
		</view>
		<view class="employ_part" v-for="(item,index) in employList" :key="index">
			<view class="top_part">
				<view class="left">
					<view class="name">
						{{item.title}}
					</view>
					<view class="distance_address">
						{{item.city}} &nbsp;&nbsp;{{item.address}}
					</view>
					<view class="types">
						<view  class="type_item" v-for="(type,i) in item.positionLabel" :key="i" v-if="i<4">
							{{type}}
						</view>
					</view>
					<view class="company_person">
						<image :src="item.avatar?  item.avatar:'../../static/img/myCenter/girl.png'"></image>
						<text>{{item.nickname}} &nbsp;|&nbsp;招聘者</text>
					</view>
				</view>
				<view class="right">
					<view class="distance_address">
						{{item.publishType}}
					</view>
					<view class="money">
						￥{{item.salary}}
					</view>
					<view class="distance" v-if="item.joinNum">已有{{item.joinNum}}人参加</view>
					<view class="go_rob"  @click="jobDetail(item.id)">
					     我要报名
					</view>
				<!-- 	<view class="go_rob no_bgc" v-else>
					     未招到v-if="item.isHave"
					</view> -->
				</view>
						
			</view>
		</view>
		<view class="reach_bottom">
			~暂无更多内容~
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				TypeList: [
					{
						name:'全部'
					},
					{
						name:'全职招聘'
					},
					{
						name:'钟点工'
					},
					{
						name:'日结工'
					},
					{
						name:'短期工'
					},
					{
						name:'长期工'
					},
					{
						name:'预约工'
					},
				],
				employList: [],
				publishType:"日结工",
				info:{
					page: 1,
					pageSize:20,
					publishType:'',
					positionType: 0,
					keyword:''
				},
				total: 0,
				id: '',
				more:false,
			}
		},
		mounted(){
			this.getRecruitList()
		},
		onLoad(option) {
			this.id = option.id || ''
			console.log(option.keyword)
			this.info.keyword = option.keyword
		},
		onPullDownRefresh(){ //下拉刷新
			this.info.page = 1
			this.getRecruitList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
		console.log("1212")
			if(this.info.page < this.total) {
				this.info.page++
				this.getRecruitList()
			}
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.target.value
				this.info.publishType = this.TypeList[this.index].name
				if(this.info.publishType == '全部') {
					this.info.publishType == ''
				}
				this.info.page = 1
				this.getRecruitList()
			},
				getRecruitList(){
					let info = this.info
					info.positionType = this.id ? Number(this.id) : 0
					this.$utils.requert({url:'RecruitMsg',type:'post',data:info}).then(res=>{
						if(res.code === 1 ){
							this.total = Math.ceil(res.data.total / this.info.pageSize)
							console.log(this.total)
							if (this.info.page = 1) {
								this.employList = res.data.data
							} else {
								this.employList = this.employList.concat(res.data.data)
							}
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
				},
				search_key(){
					this.getRecruitList()
				},
				jobDetail(id){
					uni.navigateTo({
						url:"/pages/jobDetail/jobDetail?id=" + id
					})
				}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.type_box{
		font-size: 32rpx;
	}
	.arrow_down {
		width: 22rpx;
		height: 12rpx;
		margin-left: 10rpx;
	}
	.container {
		width: 100%;
		height: 100%;
		padding:10rpx 23rpx;
		box-sizing: border-box;
	}
	.employ_part{
		padding:40rpx 8rpx;
		/* display: flex;
		justify-content: space-between;
		position: relative; */
		border:1rpx solid #f6f6f6;
		margin-bottom: 30rpx;

		border-radius: 7rpx;
	}
	.top_part{
		display: flex;
		justify-content: space-between;
		position: relative;
				margin-bottom: 30rpx;
	}
	.employ_part .name{
		font-size: 31rpx;
		color:#323232;
	}
	 .distance_address{
		font-size: 24rpx;
		color: #838282;
	}
	.left .distance_address{
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.employ_part .types{
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}
	.employ_part .types .type_item{
		padding:0 8rpx;
		border:1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		flex-shrink: 0;
		margin-bottom: 15rpx;
	}
	.company_person{
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.company_person image{
		width:42rpx;
		height: 42rpx;
		margin-right: 17rpx;
		border-radius: 50%;
	}
	.right{
	 text-align: right;
	 flex-shrink: 0;
	 width: 20%;
	}
	.left{
		flex: 1;
	 width: 20%;
	}
	.right .money{
		font-size: 28rpx;
		color:#FB8408;
	}
	.go_rob{
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color:#Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 0rpx;
		right: 0;
		border-radius: 7rpx;
	}
	.bottom_part{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top:1rpx solid #f6f6f6;
		padding:30rpx 20rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #C9C6C6;
	}
	.bottom_part .accept_part{
		display: flex;
		align-items: center;
		
	}
	.employ_part .types .type_item:nth-child(2n){
		color: #3185ed;
	}
	.bottom_part  image:nth-child(3){
		width: 30rpx;
		height: 32rpx;
	}
	.bottom_part  image:nth-child(1){
		width: 37rpx;
		height: 26rpx;
	}
	.bottom_part  image:nth-child(2){
		width: 33rpx;
		height: 30rpx;
	}
	.bottom_part  image:nth-child(1){
		margin-right: 20rpx;
	}
	.bottom_part  .down{
		margin-right: 20rpx;
	}
	.reach_bottom{
		margin:35rpx 0rpx;
		text-align: center;
		font-size: 28rpx;
		color: #D5D1D1;
	}
	.no_bgc{
		background-color: #f6f6f6;
	}
	.refresh{
		margin-right: 80rpx;
	}
	.input_uni {
		position: relative;
		flex: 1;
		flex-shrink: 0;
	}

	.search_input {
		width: 90%;
		height: 65rpx;
		border-radius: 70rpx;
		background-color: #fff;
		font-size: 25rpx;
		color: #333333;
		padding-left: 59rpx;
		line-height: 65rpx;
		border: 1px solid #FB8408;
		margin: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.search_img {
		position: absolute;
		left: 40rpx;
		width: 25rpx;
		height: 25rpx;
	}
</style>
